<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
		.moduleTitle {
			padding: 10px;
			border-left: solid 5px palevioletred;
			background-color: rgba(255,255,255,.7);
			/*border-radius: 5px;*/
			border-bottom-right-radius: 0px;
			border-top-right-radius: 0px
		}
		
		img.hotline {
			height: auto !important;
			max-width: initial !important;
			width: 100%;
		}
		
		p.price {
			position: absolute;
			bottom: 11px;
		}
		button.more{    margin: 10px auto;background-color: transparent;color: palevioletred;border: solid 2px palevioletred;border-radius: 10px; padding: 4px;width: 38%;}
		div.xinluDes{position: absolute !important;opacity: 0.5 !important;background: #000 !important;color: #fff !important;height: 50px !important;font-family: '微软雅黑';font-size: 18px !important;bottom: 5px !important;line-height: 50px !important;box-shadow: 0px 0px 6px #000;http://127.0.0.1:8020/travel/img/xianlu_pic3.jpg}
		img.xinluImg{height: 200px !important;}
		.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {background-color: palevioletred;}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {color: palevioletred;border-bottom: 2px solid #007aff; background: 0 0;}
	    img.freeImg{line-height: 100px !important;max-width: 150px !important;height: 100px !important;}
	     p.freeDes{    white-space: normal !important;}
	</style>
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                ￥300
				                <p class="mui-ellipsis freeDes">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				               ￥400
				                <p class="mui-ellipsis freeDes">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
				            </div>
				        </a>
				    </li>
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-right freeImg" src="img/hotjing_pic1.jpg">
				            <div class="mui-media-body">
				                ￥500
				                <p class="mui-ellipsis freeDes">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
				            </div>
				        </a>
				    </li>
				</ul>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/URL.js" type="text/javascript"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			
			function pulldownRefresh() {
//				    mui.ajax({
//					url: apiUrl,
//					type: 'get',
//					success: function(data) {
//						alert(data);
////						var pic=$(".pic");
////						var mysrc=new Array("img/menu_ico01.png","img/menu_ico02.png");
////						//循环展示图片
////						showPic.picList(pic,data);
////						var txtDOM=$(".txt");
////                      var txtSrc=["我是文本一","我是文本2"];
////                      showText.textList(txtDOM,txtSrc);
//                     
//					},
//					error: function(XMLHttpRequest, textStatus, errorThrown) {
//						alert(XMLHttpRequest.status);
//						alert(XMLHttpRequest.readyState);
//						alert(textStatus);
//					}
//				});
                
                        
                        
                    setTimeout(function() {
                    	 var dataT={
                        	"img":"img/hotjing_pic1.jpg",
                        	"price":"￥200",
                        	"des":"想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.",
                        }
                        var imgList=dataT.img;
                        var priceList=dataT.price;
                        var desList=dataT.des;
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i+1; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						 li.innerHTML ='<a>'+
				            '<img class="mui-media-object mui-pull-right freeImg" src="' + imgList + '">'+
				            '<div class="mui-media-body">'+
				                 priceList
				                +'<p class="mui-ellipsis freeDes">'+desList+'</p>'
				            '</div>'+
				        '</a>';
					
						
						
						
						
						
//						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                       
						
						
						//下拉刷新，新纪录插到最前面；
						table.insertBefore(li, table.firstChild);
					}
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
				}, 1500);






				
				
				
				
				
				
			
			}
			var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				
				setTimeout(function() {
					 var dataT={
                        	"img":"img/hotjing_pic1.jpg",
                        	"price":"￥200",
                        	"des":"我是描述信息1",
                        }
                        var imgList=dataT.img;
                        var priceList=dataT.price;
                        var desList=dataT.des;
					mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i +1; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						 li.innerHTML ='<a>'+
				            '<img class="mui-media-object mui-pull-right freeImg" src="' + imgList + '">'+
				            '<div class="mui-media-body">'+
				                 priceList
				                +'<p class="mui-ellipsis freeDes">'+desList+'</p>'
				            '</div>'+
				        '</a>';
						table.appendChild(li);
					}
				}, 1500);
			}
//			if (mui.os.plus) {
//				mui.plusReady(function() {
//					setTimeout(function() {
//						mui('#pullrefresh').pullRefresh().pullupLoading();
//					}, 10);
//
//				});
//			} else {
//				mui.ready(function() {
//					mui('#pullrefresh').pullRefresh().pullupLoading();
//				});
//			}
		</script>
	</body>

</html>